<template>
    <div class="container">
    	<!-- 固定头部导航 start-->
        <div ref="header" class="header-container">
        	<div class="header-nav">
        		<div class="left-log">
        			<img src="../../assets/logo.png" alt="">
        		</div>
        		<div class="right-nav">
        			<p>文章</p>
        			<p>微语</p>
        			<p>留言</p>
        			<p>相册</p>
        			<p>我的大学</p>
        		</div>
        	</div>
        </div>
        <div class="header-container-ms">
        	<div class="header-nav-ms">
        		<div class="left-log-ms">
        			<img src="../../assets/logo.png" alt="">
        		</div>
        		<div class="right-nav-ms">
        			<i class="el-icon-s-fold icons-ms" :class="[rotate?'go':'aa']" @click="start"></i>
        		</div>
        	</div>
        </div>
        <div class="list-ms" v-show="showinfo">
        		<p>文章</p>
        		<p>微语</p>
        		<p>留言</p>
        		<p>相册</p>
        		<p>我的大学</p>
        	</div>
        <!-- 固定头部导航 end-->
        <!-- 轮播 start-->
        <div class="block block-md">
    		<el-carousel height="800px">
    		  <el-carousel-item v-for="item in swiper" :key="item">
    		    <img :src="item.img">
    		  </el-carousel-item>
    		</el-carousel>
  		</div>
  		<div class="block block-sd">
    		<el-carousel height="200px">
    		  <el-carousel-item v-for="item in swiper" :key="item">
    		    <img :src="item.img">
    		  </el-carousel-item>
    		</el-carousel>
  		</div>
  		<!-- 轮播 end-->
  		<!-- 主要内容区 start-->
  		<div class="main-content">
  			<div class="card-change">
  				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    				<el-tab-pane label="我的笔记" name="first">
    					<div class="tab-content" v-for="item in tabList" :key="item">
    						<div class="left-img left-img-ms">
  								<img :src="item.img">
  							</div>
  							<div class="right-content right-content-ms">
  								<div class="right-icon">
  									<p class="content-title">空间立体效果图，完美呈现最终效果</p>
  									<el-button type="warning">new</el-button>
  								</div>
  								<P class="right-title">设计文章</P>
  								<p class="text-overflow">室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文</p>
  								<p>
  									<img src="../../assets/jiantou.png" alt="">
  								</p>
  							</div>
  						</div>
    				</el-tab-pane>
    				<el-tab-pane label="前端文章" name="second">
    					<div class="tab-content" v-for="item in tabList" :key="item">
    						<div class="left-img left-img-ms">
  								<img :src="item.img">
  							</div>
  							<div class="right-content">
  								<div class="right-icon">
  									<p class="content-title">前端常见案例</p>
  									<el-button type="warning">new</el-button>
  								</div>
  								<P class="right-title">设计文章</P>
  								<p class="text-overflow">室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文</p>
  								<p>
  									<img src="../../assets/jiantou.png" alt="">
  								</p>
  							</div>
  						</div>
    				</el-tab-pane>
    				<el-tab-pane label="旅游杂技" name="third">
    					<div class="tab-content" v-for="item in tabList" :key="item">
    						<div class="left-img left-img-ms">
  								<img :src="item.img">
  							</div>
  							<div class="right-content">
  								<div class="right-icon">
  									<p class="content-title">空间立体效果图，完美呈现最终效果</p>
  									<el-button type="warning">new</el-button>
  								</div>
  								<P class="right-title">设计文章</P>
  								<p class="text-overflow">走进关于我的javascript语言，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文</p>
  								<p>
  									<img src="../../assets/jiantou.png" alt="">
  								</p>
  							</div>
  						</div>
    				</el-tab-pane>
  				</el-tabs>
  			</div>
  			<!-- 分页器 -->
  			<div class="page-part">
  				<div class="page-btn">
  					<el-pagination
  					background
  					layout="prev, pager, next"
  					:total="100"
  					:page-size="10"
  					:pager-count="10"
  					>
					</el-pagination>
  				</div>
  			</div>
  		</div>
  		<!-- 主要内容区end -->
  		<!-- 底部导航start -->
  		<router-view></router-view>
  		<Footer class="footer-hidden"></Footer>
    </div>
</template>
<script>
	import Footer from '@/components/footer/footer';
    export default{
    	name: 'App',
  		components: {
  			Footer
  		},
        data(){
        	return{
        		// tabPosition: 'left',
        		rotate:false,
        		showinfo:false,
        		activeName: 'first',
        		// 轮播
        		swiper:[
        			{img:require('../../assets/banner1.jpg')},
        			{img:require('../../assets/banner2.jpg')},
        			{img:require('../../assets/banner1.jpg')}
        		],
        		tabList:[
        			{img:require('../../assets/sy_img1.jpg')},
        			{img:require('../../assets/sy_img2.jpg')},
        			{img:require('../../assets/sy_img3.jpg')},
        			{img:require('../../assets/sy_img4.jpg')},
        			{img:require('../../assets/sy_img5.jpg')}
        		]
        	}
        },
        // 滚动事件监听
        mounted() {
    				document.addEventListener('scroll', this.onScroll)
  		},
  		// 滚动事件监听
  		beforeDestroy() {
    				document.removeEventListener('scroll', this.onScroll)
  		},
        methods:{
        	handleClick(tab, event) {
        		console.log(tab, event);
      		},
      		// 滚动条事件
      		onScroll() {
      			const scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
      			const headerDom = this.$refs.header;
      			if (scrollTop >= 200) {
        			if (!headerDom.getAttribute('class').includes('not-top')) {
          				headerDom.className = 'header-container not-top' // 添加类名 css里设置动画
        			}
      			} else {
        			headerDom.className = 'header-container'
      			}
      		},
      		// 点击旋转
      		start(){
          		this.rotate=!this.rotate;
          		this.showinfo = !this.showinfo;
          		console.log(this.rotate)
      		}
      	}
    }
</script>
<style>
	.header-container-ms{
		display:none;
	}
	.block-sd{
		display: none;
	}
	@media screen and (max-width: 600px){
		.footer-hidden{
			display: none;
		}
		.block-sd{
    		display:block;
    	}
    	.el-carousel{
    		position:relative;
    		top:81px;
    	}
    	.block-md{
    		display: none;
    	}
    	.el-carousel__item img{
  			width:100%;
  			height:200px;
  			opacity: 0.75;
  			margin: 0;
  		}
  		.left-img-ms{
  			display:none;
  		}
  		.right-content-ms{
  			width:100%;
  			margin:0 auto;
  		}
  		.el-tabs__nav-scroll{
  			display: flex;
  			justify-content: center;
  			align-items: center;
  			margin-top:40px;
  		}
  		.tab-content .right-content{
  			margin-left:0 !important;
  		}
  		.tab-content{
  			padding-bottom:0 !important;
  		}
  		.page-part{
  			margin-top:30px !important;
  		}
  		.page-part .page-btn{
  			display:flex;
  			align-items: center;
  			justify-content: center;
  			padding-bottom:40px !important;
  		}
  		.el-pagination.is-background .el-pager li{
  			margin:0 !important;
  		}
	}
	@media screen and (max-width: 900px){
		.header-container{
			display:none;
		}
		.header-container-ms{
			display:block;
			width:100%;
			background-color: #b5b4b4;
			position: fixed;
			top:0;
			z-index:11;
		}
		.header-nav-ms{
			width:100%;
			margin:0 auto;
			display:flex;
			justify-content: space-between;
			align-items: center;
		}
		.list-ms{
			width:100%;
			margin:0 auto;
			position:fixed;
			top:83px;
			z-index: 10;
			background-color: #efe9e9;
			transition: all 2s;
		}
		.list-ms p{
			width:100%;
			border-bottom:1px solid #cbc2c2;
			margin: auto;
			padding:12px;
			color:#807c7c;
		}
		.list-ms p:hover{
			color:#9e75ac;
		}
		.list-ms p:last-child{
			border-bottom:none;
		}
		.header-nav-ms .left-log-ms img{
			padding:10px;
		}
		.header-nav-ms .right-nav-ms .icons-ms{
			font-size:80px;
			color:#a1a1a5;
		}
		.temp{
			color:red;
		}
		.aa{
        	transition: all 2s;
    	}
    	.go{
        	transform:rotate(180deg);
        	transition: all 2s;
    	}
	}
	body{
		margin:0;
		padding:0;
	}
	.container{
		width:100%;
		position:relative;
	}
	/*头部导航样式start*/
	.header-container{
		width:100%;
		background-color: #cbc9c94d;
		position:fixed;
		top:0;
		z-index: 9;
		transition: all 1s;
  		transform: translate3d(0, 0, 0);
	}
	.not-top {
    	transform: translate3d(0, -200px, 0);
  	}
	.header-nav{
		width:90%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left-log{

	}
	.left-log img{

	}
	.right-nav{
		display: flex;
		justify-content: space-between;
	}
	.right-nav p{
		padding:15px 50px;
		font-size:18px;
		color:#524f4f;
	}
	.right-nav p::after{
		content: "";
		display: block;
		width:100%;
		border:1px solid #2db5a3;
		/*position:absolute;*/
		position:relative;
		top:33px;
		display:none;
	}
	.right-nav p:nth-child(1):after{
		display:block;
	}
	.right-nav p:hover::after{
		display:block;
	}
	.right-nav p:hover{
		color:#2db5a3;
	}
	/*头部导航样式end*/
	/*轮播样式start*/
  	.el-carousel__item img{
  		width:100%;
  		height:800px;
  		opacity: 0.75;
  		margin: 0;
  	}
  	.el-carousel__item:nth-child(2n) {
     	background-color: #99a9bf;
  	}
  	.el-carousel__item:nth-child(2n+1) {
    	background-color: #d3dce6;
  	}
  	/*轮播样式end*/
  	/*主要内容样式start*/
  	.main-content{
  		width:80%;
  		height:300px;
  		margin:80px auto;
  	}
  	.tab-content {
  		border:none;
  		display: flex;
  		justify-content: space-between;
  		padding-left:20px;
  		padding-bottom:80px;
  		/*align-items: center;*/
  	}
  	.tab-content .left-img {
  		width: 300px;
  		height:auto;
  	}
  	.tab-content .left-img img{
  		width: 300px;
  	}
  	.tab-content .right-content{
  		margin-left:100px;
  	}
  	.right-icon{
  		display: flex;
  		justify-content: left;
  		align-items: flex-start;
  	}
  	.right-content .content-title{
  		font-size: 22px;
  		overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 1;  
    	-webkit-box-orient: vertical;
  	}
  	.right-content .el-button{
  		background-color: #FF5722;
  		padding:4px 10px;
  		margin-left:4px;
  		margin-top:25px;
  	}
  	.el-button:hover{
  		opacity: .8;
  	}
  	.right-title{
  		margin-top: -7px;
  		color:#FF5722;
  	}
  	.text-overflow{
  		font-size:14px;
  		overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;  
    	-webkit-box-orient: vertical;
  	}
  	.card-change .el-tabs--card>.el-tabs__header{
     border-bottom: none;
	}
	.card-change .el-tabs--card>.el-tabs__header .el-tabs__nav{
		border:none;
	}
	.page-part{
		width:100%;
	}
	.page-btn{
		width:80%;
		margin:0 auto;
		text-align:center;
		padding-bottom:80px;
	}
	/*主要内容样式end*/
</style>